<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <TodoListHeader
      @addList="addList"
    ></TodoListHeader>

    <!-- 主体部分 -->
    <TodoListBody
    :list="renderList"
    @changeFlag="changeFlag"
    @delList="delList"
    @changeAllFlag="changeAllFlag"
    ></TodoListBody>

    <!-- 底部部分 -->
    <TodoListFooter
      :sum="sum"
      :finish="finish"
      @delAll="delAll"
      :type="type"
      @changeType="changeType"
    ></TodoListFooter>
  </section>
</template>

<script>
import TodoListHeader from "./components/TodoListHeader.vue";
import TodoListBody from "./components/TodoListBody.vue";
import TodoListFooter from "./components/TodoListFooter.vue";

export default {

  // 注册组件
  components: {
    TodoListHeader,
    TodoListBody,
    TodoListFooter
  },

  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
        {
          id: 1,
          value: '读万卷书',
          flag: true
        },
        {
          id: 2,
          value: '行万里路',
          flag: false
        },
      ],
      type: "all"
    }
  },

  methods: {
    // 改变事件状态(body)
    changeFlag(id, flag) {
      this.list.forEach(item => {
        if (item.id === id) item.flag = flag
      })
    },

    // 添加事件(header)
    addList(value) {
      this.list = [
        ...this.list,
        {
          id: +new Date(),
          value: value,
          flag: false
        }
      ]
    },

    // 删除事件(body)
    delList(id) {
      // 优化 进行中事件不能删除
      const event = this.list.find(item => item.id === id)
      if(event.flag === false) return alert('该事件未完成，暂时无法删除')

      this.list = this.list.filter(item => item.id !== id)
    },

    // 删除所有 已完成 事件(footer)
    delAll() {
      this.list = this.list.filter(item => !item.flag)
    },

    // 改变全部事件为完成(body)
    changeAllFlag() {
      this.list.forEach(item => item.flag = true)
    },

    // 改变筛选关键词(footer)
    changeType(type) {
      this.type = type
    },
  },

  // 计算属性
  computed: {
    // 计算剩余 未完成 事件的数量(footer)
    sum() {
      return this.list.filter(item => !item.flag).length
    },

    // 计算是否存在 已完成 事件(footer)
    finish() {
      return this.list.some(item => item.flag)
    },

    // 根据筛选词筛选数据(footer)(body)
    renderList() {
      switch (this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter(item => !item.flag)
        case 'completed':
          return this.list.filter(item => item.flag)
        default:
          return this.list
      }
    }
  },

  // 监听器监听到数据改变后本地存储
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(newVal) {
        localStorage.setItem('list', JSON.stringify(newVal))
      }
    }
  }
}
</script>

<style></style>
